@use "../../ui/vars" as *;

.plus {
  .article-actions-container {
    display: flex;
  }

  .main-page-content {
    em {
      text-decoration: underline;
      font-style: normal;
      text-decoration-thickness: 0.15rem;
      text-underline-offset: 0.1em;
      text-decoration-color: var(--text-link);
    }

    h1 {
      /* MDN/Plus/Type/Overline/S */
      font: 700 12px/120% Inter;
      letter-spacing: 1.5px;
      text-transform: uppercase;
      color: var(--plus-accent-color);
    }

    h1 + blockquote {
      border: revert;
      padding: revert;
      margin: 1rem 0 2rem;
      border: 1px solid var(--background-tertiary);
      background-color: var(--background-tertiary);
      border-radius: var(--elem-radius);
      color: var(--text-primary);
      p:first-child {
        font: var(--type-heading-h1);
        margin-bottom: 2rem;
      }
      p {
        font-style: italic;
      }
    }

    img {
      margin: 2rem 0;
    }
  }
}
